class App extends React.Component {
  state = {
    tabs: [
      { label: "Display Traveller", key: "list" },
      { label: "Add Traveller", key: "add" },
      { label: "Del Traveller", key: "del" },
      { label: "show", key: "show" },
    ],
    curPage: "list", //当前页key
    seatNum: 20, //自定义设置
    travellerList: [
      {
        name: "lili",
        phone: "13111111111",
        cardId: "110111199011111111",
        createTime: "2025-03-03 12:12:12",
      },
      {
        name: "hanmeimei",
        phone: "13111111111",
        cardId: "110111199011111111",
        createTime: "2025-03-03 12:12:12",
      },
      {
        name: "soho",
        phone: "13111111111",
        cardId: "110111199011111111",
        createTime: "2025-03-03 12:12:12",
      },
    ],
  };
  handleTabChange = (key) => {
    this.setState({ curPage: key });
  };
  handlePageChange = (data) => {
    switch (data.type) {
      case "add":
        if (this.state.travellerList.length >= this.state.seatNum) {
          alert("Sorry! Is Full!");
          return;
        }
        this.state.travellerList.push(data.data);
        this.setState({ travellerList: this.state.travellerList });
        break;
      case "del":
        this.state.travellerList.splice(data.index, 1);
        this.setState({ travellerList: this.state.travellerList });
        break;
      case "search":
        console.log(data);
        this.state.travellerList.map((item) => {
          if (item.name.indexOf(data.data.name) != -1) {
            item.hidden = false;
          } else {
            item.hidden = true;
          }
        });
        console.log(this.state.travellerList);
        this.setState({ travellerList: this.state.travellerList });
        break;
    }
  };
  render() {
    return (
      <div>
        <h1>Ticket booking system</h1>
        <Tab
          tabs={this.state.tabs}
          curPage={this.state.curPage}
          onChange={this.handleTabChange}
        ></Tab>
        <Page
          curPage={this.state.curPage}
          travellerList={this.state.travellerList}
          onChange={this.handlePageChange}
          seatNum={this.state.seatNum}
        ></Page>
      </div>
    );
  }
}
class Head extends React.Component {}
class Tab extends React.Component {
  render() {
    const { tabs, curPage, onChange } = this.props;
    return (
      <div className="tab-container">
        {tabs.map((item, index) => {
          return (
            <span
              className={"tab " + (curPage === item.key ? "on" : "")}
              key={index}
              onClick={() => {
                onChange(item.key);
              }}
            >
              {item.label}
            </span>
          );
        })}
      </div>
    );
  }
}
class Page extends React.Component {
  state = {};
  switchPage = ({ curPage, travellerList, onChange, seatNum }) => {
    switch (curPage) {
      case "list":
        return (
          <DisplayTraveller
            travellerList={travellerList}
            onChange={onChange}
          ></DisplayTraveller>
        );
      case "add":
        return <AddTraveller onChange={onChange}></AddTraveller>;
      case "del":
        return (
          <DelTraveller
            travellerList={travellerList}
            onChange={onChange}
          ></DelTraveller>
        );
      case "show":
        return <Show travellerList={travellerList} seatNum={seatNum}></Show>;
    }
  };
  render() {
    return <div style={{ padding: "20px" }}>{this.switchPage(this.props)}</div>;
  }
}
class DisplayTraveller extends React.Component {
  state = { formData: { name: "" }, list: [] };
  componentDidMount() {
    this.setState({
      list: JSON.parse(JSON.stringify(this.props.travellerList)),
    });
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.search(this.state.formData.name);
  };
  search = (name) => {
    this.state.list.map((item) => {
      if (item.name.indexOf(name) != -1) {
        item.hidden = false;
      } else {
        item.hidden = true;
      }
    });
    console.log(this.state.list);
    this.setState({ list: this.state.list });
  };
  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({
      formData: {
        [name]: value, // 使用计算属性名来更新状态
      },
    });
  };
  onReset = () => {
    this.setState({
      formData: {
        name: "", // 使用计算属性名来更新状态
      },
    });

    this.search("");
    // this.props.onChange({
    //   type: "search",
    //   data: {
    //     name: "", // 使用计算属性名来更新状态
    //   },
    // });
  };
  render() {
    const { onChange } = this.props;
    return (
      <div>
        <div className="search">
          <form onSubmit={this.handleSubmit}>
            <p>
              <label>name</label>
              <input
                type="text"
                name="name"
                value={this.state.formData.name}
                onChange={this.handleChange}
              />
              <input type="button" value="reset" onClick={this.onReset} />
              <input type="submit" value="search" />
            </p>
          </form>
        </div>

        <TravellerTable
          page="list"
          onChange={onChange}
          travellerList={this.state.list}
        ></TravellerTable>
      </div>
    );
  }
}
class TravellerTable extends React.Component {
  handleDel = (item, index) => {
    this.props.onChange({ type: "del", index, data: item });
  };
  render() {
    const { travellerList, page } = this.props;
    return (
      <table cellSpacing="0" cellPadding="0" border="0">
        <thead>
          <tr>
            <th>Name</th>
            <th>Telephone</th>
            <th>ID number</th>
            <th>Booking Time</th>
            {page === "list" ? <></> : <th>active</th>}
          </tr>
        </thead>
        <tbody>
          {travellerList.map((item, index) => {
            return (
              <>
                {!item.hidden || page === "del" ? (
                  <tr key={index}>
                    <td>{item.name}</td>
                    <td>{item.phone}</td>
                    <td>{item.cardId}</td>
                    <td>{item.createTime}</td>
                    {page === "list" ? (
                      <></>
                    ) : (
                      <td>
                        <a
                          onClick={() => {
                            this.handleDel(item, index);
                          }}
                        >
                          delete
                        </a>
                      </td>
                    )}
                  </tr>
                ) : (
                  <></>
                )}
              </>
            );
          })}
        </tbody>
      </table>
    );
  }
}
function checkValue(data) {
  for (let key in data) {
    if (!data[key]) return false;
  }
  return true;
}
function todo(num) {
  return num < 10 ? "0" + num : num;
}
function getCurTime() {
  const date = new Date();
  const year = date.getFullYear(),
    month = todo(date.getMonth() + 1),
    day = todo(date.getDate()),
    hour = todo(date.getHours()),
    minute = todo(date.getMinutes()),
    second = todo(date.getSeconds());
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}
class AddTraveller extends React.Component {
  state = { formData: { name: "", phone: "", cardId: "" } };
  handleSubmit = () => {};
  onFormSubmit = (e) => {
    e.preventDefault();
    const { onChange } = this.props;
    const data = this.state.formData;
    if (!checkValue(data)) return;
    onChange({
      type: "add",
      data: { ...this.state.formData, createTime: getCurTime() },
    });
    this.setState({
      formData: { name: "", phone: "", cardId: "" },
    });
  };
  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({
      formData: {
        ...this.state.formData,
        [name]: value, // 使用计算属性名来更新状态
      },
    });
  };
  render() {
    return (
      <div>
        <form onSubmit={this.onFormSubmit}>
          <p>
            <label>name</label>
            <input
              required
              type="text"
              name="name"
              value={this.state.formData.name}
              onChange={this.handleChange}
            />
          </p>
          <p>
            <label>phone</label>
            <input
              required
              type="number"
              name="phone"
              value={this.state.formData.phone}
              onChange={this.handleChange}
            />
          </p>
          <p>
            <label>cardId</label>
            <input
              required
              type="number"
              name="cardId"
              value={this.state.formData.cardId}
              onChange={this.handleChange}
            />
          </p>
          <input type="submit" value="Submit" onClick={this.handleSubmit} />
        </form>
      </div>
    );
  }
}
class DelTraveller extends React.Component {
  render() {
    return (
      <div>
        <TravellerTable page="del" {...this.props}></TravellerTable>
      </div>
    );
  }
}
class Show extends React.Component {
  state = {
    list: [],
  };
  componentDidMount() {
    const { seatNum } = this.props;
    let list = [];
    for (let i = 0; i < seatNum; i++) {
      list.push(i);
    }
    this.setState({ list });
  }
  render() {
    const { travellerList } = this.props;
    return (
      <div style={{ display: "flex", justifyContent: "center" }}>
        <div className="seat-container">
          {this.state.list.map((index) => {
            return (
              <span
                key={index}
                className={travellerList[index] ? "on" : ""}
              ></span>
            );
          })}
        </div>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("content"));
